import React, { useMemo, useState } from "react";
import RcDropdown from "rc-dropdown";
import classNames from "classnames";
import { createUseStyles } from "react-jss";
import { Checked, Searchfor } from "@ct0/icons";
import Input from "./Input";

const TRIGGER = ["click"];

const useStyles = createUseStyles({
  moreButton: {
    padding: "0 8px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "20px",
    color: "#999",
    backgroundColor: "#fff",
    borderRadius: "4px",
    cursor: "pointer",
    height: "24px",
    width: "auto",
    border: "1px solid white",
    gap: 4,
    "& span": {
      width: "4px",
      height: "4px",
      background: "#999999",
      borderRadius: "50%",
    },
  },
  itemShadow: {
    boxShadow: "0 0 4px 0 #d0d7df",
  },
  itemBorder: {
    border: "1px solid #d0d7df",
  },
  overlayContanier: {
    zIndex: 10,
    boxShadow: "0 0 4px 0 #d0d7df",
    borderRadius: "4px",
    //FIXME: 避免影响，在内部加上了滚动条样式
    "&::-webkit-scrollbar": {
      backgroundColor: "#ffffff",
    },
    "&::-webkit-scrollbar-thumb": {
      backgroundColor: "#c7c7c7",
      backgroundClip: "padding-box",
      border: "3px solid rgba(0, 0, 0, 0)",
      borderRadius: "7px",
    },
    "&::-webkit-scrollbar-track": {
      background: "transparent",
    },
  },
  innerContainter: {
    width: "100%",
    maxHeight: "300px",
    display: "flex",
    flexDirection: "column",
    backgroundColor: "#ffffff",
    borderRadius: "4px",
  },
  overlayContent: {
    flex: 1,
    overflowY: "auto",
    padding: "2px 8px",
  },
  overlayCheck: {
    marginLeft: "8px",
  },
  overlayBlueColor: {
    color: "#0177d7",
  },
  overlayMoreItem: {
    margin: "3px 0",
    padding: "2px 0",
    cursor: "pointer",
    display: "flex",
    justifyContent: "space-between",
    "&:hover": {
      color: "#0177d7",
    },
  },
  search: {
    position: "relative",
    padding: "10px",
    borderBottom: "1px solid #F5F5F5",
  },
  searchInput: {
    height: "24px",
    lineHeight: "24px",
    margin: 0,
    padding: "0 10px",
    border: "rgb(217, 217, 217) solid 1px",
    color: "rgb(51, 51, 51) !important",
    boxSizing: "border-box",
    "&::placeholder": {
      color: "#c5c5c5",
    },
    "&:focus": {
      borderColor: "#037AFF",
    },
  },
  searchIcon: {
    width: "20px",
    height: "20px",
    position: "absolute",
    top: "12px",
    right: "20px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default function MoreButton({
  options,
  value,
  shadow,
  onChange,
}: {
  options: Array<{ label: string; value: string }>;
  value: Array<string>;
  shadow?: boolean;
  onChange: (value: Array<string>) => void;
}) {
  const classes = useStyles();

  const handler = (key: string) => {
    const keys = value.includes(key)
      ? value.filter((i) => i != key)
      : value.concat([key]);
    onChange([...keys]);
  };

  return (
    <RcDropdown
      trigger={TRIGGER}
      getPopupContainer={(node) => node.parentElement!}
      overlayClassName={classes.overlayContanier}
      overlay={<Overlay items={options} showKeys={value} onClick={handler} />}
    >
      <div
        className={classNames(
          classes.moreButton,
          shadow ? classes.itemShadow : classes.itemBorder
        )}
      >
        <span />
        <span />
        <span />
      </div>
    </RcDropdown>
  );
}

function Overlay({
  items,
  showKeys,
  onClick,
}: {
  onClick: (key: string) => void;
  showKeys: Array<string>;
  items: Array<{ label: string; value: string }>;
}) {
  const classes = useStyles();

  const [search, setSearch] = useState<string>();

  const computedItems = useMemo(() => {
    if (!search) return items;
    return items.filter((i) => i.label.includes(search));
  }, [items, search]);

  return (
    <div className={classes.innerContainter}>
      <div className={classes.search}>
        <Input
          type="string"
          value={search}
          placeholder="请输入名称"
          onInput={(v) => {
            setSearch(v as string);
          }}
          className={classes.searchInput}
        />
        <span className={classes.searchIcon}>
          <Searchfor style={{ color: "#c5c5c5" }} />
        </span>
      </div>
      <div className={classes.overlayContent}>
        <div>
          {computedItems.map((i, index) => (
            <div
              key={index}
              className={classNames(
                classes.overlayMoreItem,
                showKeys.includes(i.value) && classes.overlayBlueColor
              )}
              onClick={() => onClick(i.value)}
            >
              {i.label}
              {showKeys.includes(i.value) && (
                <span className={classes.overlayCheck}>
                  <Checked />
                </span>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
